<template>
	<view class="container">
		<view class="header flex flex-y-center flex-x-between">
			<text class="gx">更新</text>
			<view class="tpmz">
				<image src="../../static/page/账户登录头像.png"></image>
			</view>
		</view>
		<view class="status flex flex-y-center flex-x-between">
			<text class="dd">等待中</text>
			<text class="qbgx">全部更新</text>
		</view>
		<view class="list">

			<block v-for="(item,index) in appList">
				<view class="你" :key="index">
					<view class="top flex flex-y-center flex-x-between">
						<view class="left flex flex-y-center flex-x-left">
							<image :src="item.logo" class="tp1"></image>
							<view class="info flex-col">
								<view class="a1">{{item.title}}</view>
								<view class="a2">{{item.time}}</view>
							</view>
						</view>
						<button class="a4 right" :style="'font-size:'+ (index ==1?'32rpx':'28rpx')">更新</button>
					</view>
					<view class="center">
						<text class="u2">
							{{item.content}}
						</text>
						<text class="u3">更多</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	 var y = 0;
	// for (i = 1; i <= 10; i++) {
	// 	y++;
	// }

	export default {
		data() {
			return {
				appList: [{
					logo: '../../static/page/更新1.png',
					title: 'ZCOOL站酷-让设计更...',
					time: '昨天',
					content: '1、登陆注册模块优化,使用短信登录更快捷\n2、修复其他已知Bug'
				}, {
					logo: '../../static/page/更新1.png',
					title: 'ZCOOL站酷-让设计更...',
					time: '昨天',
					content: '1、登陆注册模块优化,使用短信登录更快捷\n2、修复其他已知Bug'
				}, {
					logo: '../../static/page/更新1.png',
					title: 'ZCOOL站酷-让设计更...',
					time: '昨天',
					content: '1、登陆注册模块优化,使用短信登录更快捷\n2、修复其他已知Bug'
				}, {
					logo: '../../static/page/更新1.png',
					title: 'ZCOOL站酷-让设计更...',
					time: '昨天',
					content: '1、登陆注册模块优化,使用短信登录更快捷\n2、修复其他已知Bug'
				}, {
					logo: '../../static/page/更新1.png',
					title: 'ZCOOL站酷-让设计更...',
					time: '昨天',
					content: '1、登陆注册模块优化,使用短信登录更快捷\n2、修复其他已知Bug'
				}, {
					logo: '../../static/page/更新1.png',
					title: 'ZCOOL站酷-让设计更...',
					time: '昨天',
					content: '1、登陆注册模块优化,使用短信登录更快捷\n2、修复其他已知Bug'
				}]
			};
		}
	}
</script>

<style lang="scss" scoped>
	$theme_color:#2a82e4;

	.container {
		width: 670rpx;
		height: auto;
		margin: 0 auto;

		.header {
			padding-top: 80rpx;
			width: 100%;
			height: 80rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #e5e5e5;

			.gx {
				font-weight: bold;
				font-size: 80rpx;
			}

			.tpmz {
				width: 72rpx;
				height: 72rpx;
				border-radius: 36rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.status {
			width: 100%;
			height: 60rpx;
			padding-top: 17rpx;

			.dd {
				font-weight: bold;
				font-size: 45rpx;
			}

			.qbgx {
				color: $theme_color;
			}
		}

		.list {
			width: 100%;
			margin-top: 20rpx;

			.你 {
				width: 100%;
				padding-top: 31rpx;
				border-top: 1px solid #e5e5e5;

				.top {
					width: 100%;

					.left {
						width: calc(100% - 168rpx);

						.tp1 {
							width: 124rpx;
							height: 124rpx;
						}

						.info {
							margin-left: 20rpx;

							.a1 {
								font-size: 28rpx;
							}

							.a2 {
								font-size: 20rpx;
								color: #afafaf;
							}
						}
					}

					.right {
						height: 60rpx;
						line-height: 60rpx;
						width: 148rpx;
						background-color: rgba(248, 248, 248, 1);
						border-radius: 30rpx;
						font-size: rpx;
						font-weight: bold;
						color: $theme_color;
					}

					.right::after {
						border: none !important;
					}
				}

				.center {
					margin-top: 35rpx;
					margin-bottom: 35rpx;
					position: relative;

					.u1 {
						font-size: 28rpx;
						width: 100%;
						height: auto;
					}

					.u3 {
						font-size: 28rpx;
						color: $theme_color;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
			}

			.item:first-child {
				padding-top: 0;
				border-top: none;
			}
		}
	}
</style>
